import Vue from 'vue'
import VueRouter from 'vue-router'
// import { component } from 'vue/types/umd'
// import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

// const routes = [

//   {
//     path: '/',
//     redirect: '/login',
//   },
//   //登录
//   {
//     path: '/login',
//     component: () => import('@/views/login/Login.vue')
//   },
//   //首页
//   {
//     path: '/home',
//     redirect: '/homme',
//     meta: { title: '首页' },
//     component: () => import('@/layout/Layout.vue'),
//     children: [
//       {
//         path: '',
//         meta: { title: '首页' },

//         component: () => import('@/views/home/Home.vue')
//       }
//     ]
//   },
//   //账号
//   {
//     path: '/account',
//     meta: { title: '账号管理' },

//     component: () => import('@/layout/Layout.vue'),
//     children: [
//       {
//         path: '/account/add',
//         meta: { title: '账号添加' },

//         component: () => import('@/views/account/AccountAdd.vue')
//       },
//       {
//         path: '/account/list',
//         meta: { title: '账号列表' },

//         component: () => import('@/views/account/AccountList.vue')
//       },
//       {
//         path: '/account/password',
//         meta: { title: '修改密码' },

//         component: () => import('@/views/account/AccountPassword.vue')
//       },
//       {
//         path: '/account/personal',
//         meta: { title: '个人中心' },

//         component: () => import('@/views/account/AccountPersonal.vue')
//       },
//     ]
//   },
//   //商品
//   {
//     path: '/goods',
//     meta: { title: '商品管理' },

//     component: () => import('@/layout/Layout.vue'),
//     children: [
//       {
//         path: '/goods/list',
//         meta: { title: '商品列表' },

//         component: () => import('@/views/goods/GoodsList.vue')
//       },
//       {
//         path: '/goods/add',
//         meta: { title: '商品添加' },

//         component: () => import('@/views/goods/GoodsAdd.vue')
//       },
//       {
//         path: '/goods/assort',
//         meta: { title: '商品分类' },

//         component: () => import('@/views/goods/GoodsAssort.vue')
//       },
//     ]
//   },
//   //订单
//   {
//     path: '/order',
//     meta: { title: '订单管理' },

//     component: () => import('@/layout/Layout.vue'),
//     children: [
//       {
//         path: '',
//         meta: { title: '订单管理' },

//         component: () => import('@/views/order/Order')
//       }
//     ]
//   },
//   //店铺
//   {
//     path: '/shop',
//     meta: { title: '店铺管理' },

//     component: () => import('@/layout/Layout.vue'),
//     children: [
//       {
//         path: '',
//         meta: { title: '店铺管理' },

//         component: () => import('@/views/shop/Shop')
//       }
//     ]
//   },
//   //销售
//   {
//     path: '/sale',
//     meta: { title: '销售管理' },

//     component: () => import('@/layout/Layout.vue'),
//     children: [
//       {
//         path: '/sale/goods',
//         meta: { title: '商品统计' },

//         component: () => import('@/views/sale/SaleGoods.vue')
//       },
//       {
//         path: '/sale/order',
//         meta: { title: '商品订单' },
//         component: () => import('@/views/sale/SaleOrder.vue')
//       }
//     ]
//   },
//   {
//     path: '/*',
//     // component: Error404
//     component: () => import('@/views/errors/Error404.vue'),
//   }

// ]


// 设置静态路由
const constRoutes = [
  {
    path: '/',
    redirect: '/login',
  },
  //登录
  {
    path: '/login',
    component: () => import('@/views/login/Login.vue')
  },
  //首页
  {
    path: '/home',
    redirect: '/homme',
    meta: { title: '首页', menu: true },
    component: () => import('@/layout/Layout.vue'),
    children: [
      {
        path: '',
        meta: { title: '首页', menu: true },

        component: () => import('@/views/home/Home.vue')
      }
    ]
  },
]
// 动态路由
const dynamicRoutes = [
  //账号
  {
    path: '/account',
    meta: { title: '账号管理', roles: ['super', 'normal'] },

    component: () => import('@/layout/Layout.vue'),
    children: [
      {
        path: '/account/add',
        meta: { title: '账号添加', roles: ['super'] },

        component: () => import('@/views/account/AccountAdd.vue')
      },
      {
        path: '/account/list',
        meta: { title: '账号列表', roles: ['super', 'normal'] },

        component: () => import('@/views/account/AccountList.vue')
      },
      {
        path: '/account/password',
        meta: { title: '修改密码', roles: ['super', 'normal'] },

        component: () => import('@/views/account/AccountPassword.vue')
      },
      {
        path: '/account/personal',
        meta: { title: '个人中心', roles: ['super', 'normal'] },

        component: () => import('@/views/account/AccountPersonal.vue')
      },
    ]
  },
  //商品
  {
    path: '/goods',
    meta: { title: '商品管理', roles: ['super', 'normal'] },

    component: () => import('@/layout/Layout.vue'),
    children: [
      {
        path: '/goods/list',
        meta: { title: '商品列表', roles: ['super', 'normal'] },

        component: () => import('@/views/goods/GoodsList.vue')
      },
      {
        path: '/goods/add',
        meta: { title: '商品添加', roles: ['super'] },

        component: () => import('@/views/goods/GoodsAdd.vue')
      },
      {
        path: '/goods/assort',
        meta: { title: '商品分类', roles: ['super', 'normal'] },

        component: () => import('@/views/goods/GoodsAssort.vue')
      },
    ]
  },
  //订单
  {
    path: '/order',
    meta: { title: '订单管理', roles: ['super'] },

    component: () => import('@/layout/Layout.vue'),
    children: [
      {
        path: '',
        meta: { title: '订单管理', roles: ['super'] },

        component: () => import('@/views/order/Order')
      }
    ]
  },
  //店铺
  {
    path: '/shop',
    meta: { title: '店铺管理', roles: ['super'] },

    component: () => import('@/layout/Layout.vue'),
    children: [
      {
        path: '',
        meta: { title: '店铺管理', roles: ['super'] },

        component: () => import('@/views/shop/Shop')
      }
    ]
  },
  //销售
  {
    path: '/sale',
    meta: { title: '销售管理', roles: ['super'] },

    component: () => import('@/layout/Layout.vue'),
    children: [
      {
        path: '/sale/goods',
        meta: { title: '商品统计', roles: ['super'] },

        component: () => import('@/views/sale/SaleGoods.vue')
      },
      {
        path: '/sale/order',
        meta: { title: '商品订单', roles: ['super'] },
        component: () => import('@/views/sale/SaleOrder.vue')
      }
    ]
  },
]
// // 普通用户的动态路由
// const normalRoutes = [
//   //账号
//   {
//     path: '/account',
//     meta: { title: '账号管理' },

//     component: () => import('@/layout/Layout.vue'),
//     children: [
//       {
//         path: '/account/list',
//         meta: { title: '账号列表' },

//         component: () => import('@/views/account/AccountList.vue')
//       },
//       {
//         path: '/account/password',
//         meta: { title: '修改密码' },

//         component: () => import('@/views/account/AccountPassword.vue')
//       },
//       {
//         path: '/account/personal',
//         meta: { title: '个人中心' },

//         component: () => import('@/views/account/AccountPersonal.vue')
//       },
//       {
//         path: '/*',
//         // component: Error404
//         component: () => import('@/views/errors/Error404.vue'),
//       }
//     ]
//   },
//   //商品
//   {
//     path: '/goods',
//     meta: { title: '商品管理' },

//     component: () => import('@/layout/Layout.vue'),
//     children: [
//       {
//         path: '/goods/list',
//         meta: { title: '商品列表' },

//         component: () => import('@/views/goods/GoodsList.vue')
//       },
//       {
//         path: '/goods/assort',
//         meta: { title: '商品分类' },

//         component: () => import('@/views/goods/GoodsAssort.vue')
//       },
//     ]
//   },
// ]
// // 超级管理员的动态路由
// const superRoutes = [
//   //账号
//   {
//     path: '/account',
//     meta: { title: '账号管理' },

//     component: () => import('@/layout/Layout.vue'),
//     children: [
//       {
//         path: '/account/add',
//         meta: { title: '账号添加' },

//         component: () => import('@/views/account/AccountAdd.vue')
//       },
//       {
//         path: '/account/list',
//         meta: { title: '账号列表' },

//         component: () => import('@/views/account/AccountList.vue')
//       },
//       {
//         path: '/account/password',
//         meta: { title: '修改密码' },

//         component: () => import('@/views/account/AccountPassword.vue')
//       },
//       {
//         path: '/account/personal',
//         meta: { title: '个人中心' },

//         component: () => import('@/views/account/AccountPersonal.vue')
//       },
//     ]
//   },
//   //商品
//   {
//     path: '/goods',
//     meta: { title: '商品管理' },

//     component: () => import('@/layout/Layout.vue'),
//     children: [
//       {
//         path: '/goods/list',
//         meta: { title: '商品列表' },

//         component: () => import('@/views/goods/GoodsList.vue')
//       },
//       {
//         path: '/goods/add',
//         meta: { title: '商品添加' },

//         component: () => import('@/views/goods/GoodsAdd.vue')
//       },
//       {
//         path: '/goods/assort',
//         meta: { title: '商品分类' },

//         component: () => import('@/views/goods/GoodsAssort.vue')
//       },
//     ]
//   },
//   //订单
//   {
//     path: '/order',
//     meta: { title: '订单管理' },

//     component: () => import('@/layout/Layout.vue'),
//     children: [
//       {
//         path: '',
//         meta: { title: '订单管理' },

//         component: () => import('@/views/order/Order')
//       }
//     ]
//   },
//   //店铺
//   {
//     path: '/shop',
//     meta: { title: '店铺管理' },

//     component: () => import('@/layout/Layout.vue'),
//     children: [
//       {
//         path: '',
//         meta: { title: '店铺管理' },

//         component: () => import('@/views/shop/Shop')
//       }
//     ]
//   },
//   //销售
//   {
//     path: '/sale',
//     meta: { title: '销售管理' },

//     component: () => import('@/layout/Layout.vue'),
//     children: [
//       {
//         path: '/sale/goods',
//         meta: { title: '商品统计' },

//         component: () => import('@/views/sale/SaleGoods.vue')
//       },
//       {
//         path: '/sale/order',
//         meta: { title: '商品订单' },
//         component: () => import('@/views/sale/SaleOrder.vue')
//       }
//     ]
//   },
//   {
//     path: '/*',
//     // component: Error404
//     component: () => import('@/views/errors/Error404.vue'),
//   }
// ]

const router = new VueRouter({
  routes: constRoutes
})
// 传入一个路由列表，再传入一个角色。 我返回一个过滤之后的路由列表 
function filterRoutes(routes, role) {
  return routes.filter(route => {
    // 如果有子路由(递归)
    if (route.children && route.children.length > 0) {
      route.children = filterRoutes(route.children, role)
    }
    return route.meta.roles.includes(role)
  })
}

export function addRouteByRole() {
  // 拿到角色
  let role = localStorage.getItem('role')
  if (!role) return
  // 得到当前用户的路由列表
  let roleArr = filterRoutes(dynamicRoutes, role)
  // 调用addRoute添加路由
  roleArr.forEach(route => {
    router.addRoute(route)
  })
  // 404代码
}


// 根据角色得到菜单数据
export function getMenuListByRole() {
  const role = localStorage.getItem('role')
  if (!role) return []

  // 把静态路由里面打了标的route拿出来
  let arr = constRoutes.filter(route => route.meta && route.meta.menu)
  return [...arr, ...filterRoutes(dynamicRoutes, role)]
}
addRouteByRole()


// 前置路由守卫
const whiteList = ['/login', '/404']
router.beforeEach((to, from, next) => {
  // 先判断to.fullPath 在不在白名单里面，如果在白名单里面，直接放行（不用管token）
  if (whiteList.includes(to.fullPath)) return next()

  let token = localStorage.getItem('token')
  if (token) {
    // 表示登录状态, 直接放行
    next()
  } else {
    next('/login')
  }
})
// // from 来自哪
// // to 要去哪
// // next() 是一个函数 必须使用
// // 使用: next() 直接放行  // next('/路径名') 跳转到指定页面
// router.beforeEach((to, from, next) => {
//   // 获取 token
//   const token = localStorage.getItem('token')
//   // 是否有 token ？
//   if (token) { // 有 token
//     // 是否去登录页 ？
//     if (to.path === '/login') { // 去登录页
//       next('/') // 回首页

//     } else { // 不去登录页
//       next() // 放行
//     }
//   } else { // 没有 token
//     // 是否去白名单 ？
//     if (whiteList.includes(to.path)) { // 去白名单
//       next() // 放行
//     } else { // 不去白名单
//       next('/login') // 去登录页
//     }
//   }
// })
export default router
